<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{deviceSn}}</view>
		</view>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChange(index)">
				{{item}}
				</view>
			</view>
		</scroll-view>
		<block v-if="tabIndex == 0">
		<view class="panel-body bg-white margin-top-sm padding">
			<view class="text-orange text-lg">{{info.deviceSn}}</view>
			<view class="flex justify-between margin-top">
				<view>设备类型</view>
				<view>{{info.typeName}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>电池电量</view>
				<view>{{info.batteryPower}}</view>
			</view>
			<view class="flex justify-around margin-top solid-top solid-bottom padding">
				<view class="text-center">
					<view>租借方式</view>
					<view class="text-lg text-black margin-top">{{info.leaseTypeName}}</view>
				</view>
				<view class="solid-right"></view>
				<view class="text-center">
					<view>当前状态</view>
					<view class="text-lg text-black margin-top">{{info.stateName}}</view>
				</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>最后租借订单</view>
				<view>{{info.currentTradeNo || '未租借过'}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>最后租借时间</view>
				<view>{{info.lastLeaseDate || '未租借过'}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>创建时间</view>
				<view>{{info.createDate}}</view>
			</view>
		</view>
		<view class="panel-body bg-white margin-top-sm padding" v-if="info.leaseType == 2">
			<view class="text-bold solid-bottom padding-bottom-sm">操作测试</view>
			<view>
				<view class="cu-form-group">
					<view class="title">启动时长(小时)</view>
					<input placeholder="必须填写" v-model="sendTestHours"></input>
					<button class="cu-btn bg-orange shadow" @click="btnSendOpen()">启动</button>
				</view>
				<view class="cu-form-group">
					<view class="title text-blue">{{sendTestResult}}</view>
					<button class="cu-btn bg-grey shadow" @click="btnSendClose()">关闭</button>
				</view>
				<view class="cu-form-group flex justify-around">
					<button class="cu-btn bg-grey shadow" @click="btnSendLight(0)">关闭灯光</button>
					<button class="cu-btn bg-orange shadow" @click="btnSendLight(1)">开启灯光</button>
				</view>
			</view>
		</view>
		<view class="panel-body bg-white margin-top-sm padding" v-if="info.placeId != null">
			<view class="text-bold solid-bottom padding-bottom-sm">部署信息</view>
			<view class="flex justify-between margin-top">
				<view>部署网点</view>
				<view>{{info.placeName}}</view>
			</view>
			<view class="flex justify-between margin-top">
				<view>部署地区</view>
				<view>{{info.placeAreaName}}</view>
			</view>
		</view>
		<view class="panel-body bg-white margin-top-sm padding">
			<view class="text-bold solid-bottom padding-bottom-sm">设备二维码</view>
			<view class="img">
				<canvas canvas-id="qrcode" style="width: 300rpx;margin: 0 auto;"/>
			</view>
		</view>
		</block>
		<block v-if="tabIndex == 1">
			<view id="header" class="margin-top-sm">
				<view class="list-header bg-white">
					<view class="solid-bottom">
						<view class="cu-bar search">
							<view class="search-form round">
								<text class="cuIcon-search"></text>
								<input type="text" placeholder="搜索订单号" v-model="keyword"></input>
							</view>
							<view class="action">
								<button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action">查询范围：
						<picker mode="date" fields="year" :start="startYear" :end="endYear" @change="bindYearChange">
							<text class="cu-tag bg-grey radius">{{year}}</text>
						</picker>
					</view>
				</view>
			</view>
			<view class="list-body">
				<scroll-view scroll-y @scrolltolower="scrollTolower" :style="scrollHeight">
					<view class="cu-card article" v-for="(item,index) in listData" :key="index">
						<view class="cu-item padding-top-xs">
							<view @click="toOrderInfo(item)">
								<view class="title">
									<view class="text-cut text-orange">{{item.tradeNo}}</view>
								</view>
								<view class="content">
									<view class="text-cut">
										<view><text class="tt">会员名称：</text>{{item.memberName}}</view>
										<view><text class="tt">租借方式：</text><text class="text-grey">{{item.leaseTypeName}}</text></view>
										<view><text class="tt">租借网点：</text>{{item.leasePlaceName}}</view>
										<view><text class="tt">归还方式：</text><text class="text-grey">{{item.revertTypeName}}</text></view>
										<view v-if="item.revertPlaceName"><text class="tt">归还网点：</text>{{item.revertPlaceName}}</view>
									    <view><text class="tt">租借时长：</text>预约租借<text class="text-red">{{item.leaseDay}}</text>天，已租借<text class="text-red">{{item.useDay}}</text>天</view>
										<view><text class="tt">收费方式：</text>{{item.costModeName}}</view>
										<view><text class="tt">订单金额：</text><text class="text-red">{{item.moneyStr}}元</text></view>
										<view><text class="tt">创建时间：</text>{{item.createDate}}</view>
										<view><text class="tt">订单状态：</text>
											<text v-if="item.state == 1" class="cu-tag bg-green sm round">{{item.stateName}}</text>
											<text v-if="item.state == 2" class="cu-tag bg-blue sm round">{{item.stateName}}</text>
											<text v-if="item.state == 4" class="cu-tag bg-red sm round">{{item.stateName}}</text>
										</view>
									</view>
								</view>
								<button class="cu-btn line-orange btn-info"><text class="cuIcon-searchlist"></text></button>
							</view>
						</view>
					</view>
					<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
					<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
				</scroll-view>
			</view>
		</block>
	</view>
</template>

<script>
	import uQRCode from "@/js_sdk/uQrcode.js"
	export default {
		data() {
			return {
				deviceSn:null,
				info:{},
				tabListData:["基础信息","历史订单"],
				tabIndex:0,
				
				year:'2024',
				startYear:'2023',
				endYear:'2024',
				listData:[],
				keyword:'',
				pageNo:1,
				
				sendTestHours:1,
				sendTestResult:'暂无测试操作',
				sendTestTradeNo:null,
				
				scrollHeight:'height:70vh;'
			};
		},
		onLoad(option) {
			this.deviceSn = option.deviceSn;
			this._loadInfo();
			this._createQRcode();
		},
		mounted:function(){
			//页面渲染后调用
			const _self = this;
			uni.onWindowResize(function(res){
				_self._setScrollHeight(res.size.windowHeight);
			})
		},
		methods: {
			_loadInfo:function(){
				if(this.deviceSn){
					const _self = this;
					const api = this.$request;
					api.post(api.url.bxscnBatteryInfo,{
						deviceSn:this.deviceSn
					},res=>{
						console.log(res);
						if(res.code==200){
							_self.info = res.body;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false,
								complete:function(){
									uni.navigateBack();
								}
							});
						}else {
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							});
							setTimeout(function(){
								uni.navigateBack();
							},1000);
						}
					})
				}else{
					uni.showToast({
						title:'参数错误',
						icon:'error'
					});
					setTimeout(function(){
						uni.navigateBack();
					},1000);
				}
			},
			//**生成二维码**//
			_createQRcode() {
				if(this.deviceSn){
					let httpDomain = this.$store.getters.GET_httpDomain;
					uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: this,
						text: httpDomain + '/dev/bxscn_battery/22HDG062200005',
						size: 150,
						margin: 0,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'jpg',
						errorCorrectLevel: uQRCode.errorCorrectLevel.H,
						success: res => {}
					})
				}
			},
			_loadListData:function(){
				if(this.deviceSn && this.pageNo > 0){
					const _self = this;
					const api = this.$request;
					api.post(api.url.bxscnShopOrderList,{
						year:this.year,
						trim:this.keyword,
						pageNo:this.pageNo,
						deviceSn:this.deviceSn
					},(res)=>{
						console.log(res)
						if(res.code==200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = self.pageNo + 1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			_setScrollHeight:function(screenHeight){
				const _self = this;
				const query = uni.createSelectorQuery().in(this);
				query.select('#header').boundingClientRect(function(rect){
					console.log(rect);
					//如果Tab没有显示则rect为空
					if(rect){
						let height = screenHeight - rect.height - 120;
						_self.scrollHeight = 'height:'+height+'px;'
					}
				}).exec();
			},
			_sendTestResult:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnBatteryOperateResult,{
					tradeNo:this.sendTestTradeNo,
					deviceSn:this.deviceSn
				},(res)=>{
					console.log(res)
					if(res.code == 200){
						uni.hideLoading();
						_self.sendTestResult = '发送命令成功';
					}else{
						_self.times = _self.times - 1;
						if(_self.times > 0){
							setTimeout(function(){
								_self._sendTestResult();
							},1000);
						}else{
							uni.hideLoading();
							uni.showToast({
								title:'发送命令失败',
								icon:'error'
							})
						}
					}
				})
			},
			bindTabChange:function(index){
				this.tabIndex = index;
				if(index == 0){
					this._createQRcode();
				}else if(index == 1){
					this._loadListData();
					//页面初次渲染时Header没有显示无法计算高度
					const _self = this;
					setTimeout(function(){
						let sysInfo = uni.getSystemInfoSync();
						_self._setScrollHeight(sysInfo.screenHeight);
					},700)
				}
			},
			bindYearChange:function(e){
				console.log(e);
				this.year = e.detail.value;
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			btnSendOpen(){
				if(!this.sendTestHours){
					uni.showModal({
						title:'温馨提示',
						content:'请先填写启动时长',
						showCancel:false
					})
					return;
				}
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要发送命令启用电池吗？',
					complete:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'处理中...'
							})
							api.post(api.url.bxscnBatteryOperate,{
								hours:_self.sendTestHours,
								deviceSn:_self.deviceSn,
								type:1
							},(res)=>{
								console.log(res)
								if(res.code==200){
									_self.times = 20;
									_self.sendTestTradeNo = res.body;
									_self._sendTestResult();
								}else if(res.msg){
									uni.hideLoading();
									uni.showModal({
										content:res.msg,
										showCancel:false
									})
								}else{
									uni.hideLoading();
									uni.showToast({
										title:'操作失败',
										icon:'error'
									})
								}
							})
						}
					}
				})
			},
			btnSendClose(){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要发送命令关闭电池吗？',
					complete:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'处理中...'
							})
							api.post(api.url.bxscnBatteryOperate,{
								hours:0,
								deviceSn:_self.deviceSn,
								type:2
							},(res)=>{
								console.log(res)
								if(res.code==200){
									_self.times = 20;
									_self.sendTestTradeNo = res.body;
									_self._sendTestResult();
								}else if(res.msg){
									uni.hideLoading();
									uni.showModal({
										content:res.msg,
										showCancel:false
									})
								}else{
									uni.hideLoading();
									uni.showToast({
										title:'操作失败',
										icon:'error'
									})
								}
							})
						}
					}
				})
			},
			btnSendLight:function(type){
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnBatteryLightOperate,{
					deviceSn:_self.deviceSn,
					type:type
				},(res)=>{
					console.log(res)
					if(res.code==200){
						uni.hideLoading();
						uni.showToast({
							title:'操作成功',
							icon:'success'
						})
					}else if(res.msg){
						uni.hideLoading();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			},
			btnSearch:function(){
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			toOrderInfo:function(item){
				uni.navigateTo({
					url:'/pages/agent/order/bxscn_shop/info?tradeNo='+item.tradeNo+'&createDate='+item.createDate
				});
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				this._loadListData();
			}
		}
	}
</script>

<style lang="less">
.list-body .cu-card>.cu-item{position:relative;margin-bottom:0;}
.list-body .cu-card>.cu-item .title{line-height:60rpx;}
.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}
.list-body .cu-card>.cu-item .content{font-size:26rpx;}
.list-body .cu-card>.cu-item .content .tt{min-width:130rpx;display:inline-block;text-align:right;}
</style>
